<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <title></title>
  </head>
  <body>
    <div id="app">
      <!-- v-model收集数据 -->
      <input
        type="text"
        placeholder="请搜索您想要的信息"
        @keyup.13="search"
      />

      <ul>
        <!-- 1.遍历展示数据  v-for指令 -->
        <li v-for="person in newPersons" :key="person.id">
          {{person.name}} {{person.age}}
        </li>
      </ul>
      <button @click="sorting = 'ascend' ">升序</button>
      <button @click="sorting = 'descend'">降序</button>
      <button @click="sorting = '' ">默认</button>
    </div>
    <script src="./js/vue.js"></script>
    <script>
      const vm = new Vue({
        data: {
          //人名
          persons: [
            { id: 1, name: "黄子韬", age: 28 },
            { id: 2, name: "鞠婧祎", age: 25 },
            { id: 3, name: "张韶涵", age: 35 },
            { id: 4, name: "徐艺洋", age: 28 },
            { id: 5, name: "许凯", age: 30 },
            { id: 6, name: "程潇", age: 28 },
            { id: 7, name: "米热", age: 40 },
            { id: 8, name: "马可", age: 34 },
            { id: 9, name: "鹿晗", age: 32 },
            { id: 10, name: "马铃薯", age: 36 },
            { id: 11, name: "毛不易", age: 33 },
            { id: 12, name: "贸易街", age: 40 },
          ],
          conText: "",
          
        
      // 排序标识(通过控制这个标识可以改变状态) ascend代表升序  descend代表降序
          sorting:"",
        },

        //方法
        methods: {
          // 搜素触发的函数
          search(e) {
            this.conText = e.target.value;
          },
        },

        // 计算属性
        computed: {
          newPersons() {
            //找到persons 使用数组的过滤方法(过滤掉不想要的值)  //includes 判断persons.name属性上 有没有 conText的值
            // 过滤
            const newPersons = this.persons.filter((person) =>
              person.name.includes(this.conText)
            );
           
            // 排序 (如果sorting存在 执行排序的条件)
            if(this.sorting){
            newPersons.sort((a,b) => this.sorting === "ascend"? a.age - b.age : b.age - a.age )
            };

            // 返回值
            return newPersons;
          },
        },
      });
      vm.$mount("#app");
    </script>
  </body>
</html>
